<template>
    <DialogVue :data="dialog" @close="onAuditCancel">
        <template #content>
            <div class="dialog-box">
                <!-- 基本信息 start-->
                <ul class="basic-info">
                    <li>
                        <p>公司名称：</p>
                        <span>{{ information.company }}</span>
                    </li>
                    <li>
                        <p>手机号码：</p>
                        <span>{{ information.phone }}</span>
                    </li>
                    <li>
                        <p>统一社会信用代码：</p>
                        <span>{{ information.companyCode }}</span>
                    </li>
                    <li>
                        <p>公司所在地：</p>
                        <span>{{ information.address }}</span>
                    </li>
                    <li>
                        <p>公司营业执照：</p>
                    </li>
                </ul>

                <el-image
                    class="preview-image"
                    :src="information.businessImage"
                    :zoom-rate="1.2"
                    :preview-src-list="perviewImageList"
                    :initial-index="4"
                    fit="cover"
                />
                <!-- 基本信息 end -->
                <!-- 审核 start -->
                <template v-if="dialog.type == 'audit'">
                    <div class="audit">
                        <el-form
                            ref="ruleFormRef"
                            :inline="true"
                            :model="dialog"
                            :rules="rules"
                            label-width="120px"
                            style="width: 100%"
                        >
                            <el-form-item label="审核状态：" prop="audit" style="width: 100%">
                                <el-radio-group v-model="dialog.audit">
                                    <el-radio v-for="item in AuditOptions" :key="item.value" :label="item.value">{{
                                        item.label
                                    }}</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item v-if="dialog.audit == '2'" label="备注：" prop="remark" style="width: 100%">
                                <el-input
                                    v-model="dialog.remark"
                                    type="textarea"
                                    :rows="4"
                                    maxlength="200"
                                    placeholder="请输入备注（最多能输入200个字）"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="btn">
                            <el-button type="primary" @click="onAuditConfirm(ruleFormRef)">确定</el-button>
                            <el-button @click="onAuditCancel">取消</el-button>
                        </div>
                    </div>
                </template>
                <!-- 审核 end -->

                <!-- 查看 start -->
                <template v-else>
                    <ul class="look-info">
                        <li>
                            <p>审核人员：</p>
                            <span>{{ information.auditUser }}</span>
                        </li>
                        <li>
                            <p>审核时间：</p>
                            <span>{{ information.auditTime }}</span>
                        </li>
                        <li>
                            <p>状态：</p>
                            <span>{{
                                information.auditStatus == '0'
                                    ? '待审核'
                                    : information.auditStatus == '1'
                                    ? '审核通过'
                                    : '审核不通过'
                            }}</span>
                        </li>
                        <li>
                            <p>备注：</p>
                            <span>{{ information.remark }}</span>
                        </li>
                    </ul>
                </template>
                <!-- 查看 end -->
            </div>
        </template>
    </DialogVue>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import DialogVue from '@/components/baseDialog/Index.vue'
import { FormInstance } from 'element-plus'
import { companyAudit } from '@/apis/company/audit'

/**
 * 注册form表单ref
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 接收父组件传递的参数
 */
const props = defineProps(['data'])

/**
 * 注册父组件的回调
 */
const emits = defineEmits(['hidden'])

/**
 * 弹窗数据
 */
const dialog = reactive({
    visible: false, //显示隐藏
    title: '审核', //标题
    width: '752px', //弹窗宽度
    type: 'audit', //弹窗类型
    audit: '', //审核状态
    remark: '' //备注
})

/**
 * 基本数据
 */
const information = reactive({
    company: '',
    address: '',
    auditStatus: '',
    auditTime: '',
    auditUser: '',
    businessImage: '',
    companyCode: '',
    id: '',
    phone: '',
    remark: '',
    submitTime: ''
})

const perviewImageList: string[] = []

/**
 * 由于props中的数据是Readonly，不能直接使用，所以用watchEffect监听props数据变化
 */
watchEffect(() => {
    dialog.visible = props.data.visible
    dialog.title = props.data.type === 'audit' ? '审核' : '查看'
    dialog.type = props.data.type
    information.company = props.data.config.companyName
    information.address = props.data.config.address
    information.auditStatus = props.data.config.auditStatus
    information.auditTime = props.data.config.auditTime
    information.auditUser = props.data.config.auditUser
    information.businessImage = props.data.config.businessImage
    information.companyCode = props.data.config.companyCode
    information.id = props.data.config.id
    information.phone = props.data.config.phone
    information.submitTime = props.data.config.submitTime
    information.remark = props.data.config.remark

    perviewImageList.length = 0

    perviewImageList.push(information.businessImage)
})

/**
 * 表单验证规则
 */
const rules = {
    audit: [{ required: true, message: '请选择审核状态', trigger: 'change' }]
}

/**
 * 审核状态选项 审核状态 (0.待审核；1.通过；2.不通过)
 */
const AuditOptions = [
    {
        value: '1',
        label: '通过'
    },
    {
        value: '2',
        label: '不通过'
    }
]

/**
 * 监听审核 点击了确定按钮
 * @param formEl
 */
const onAuditConfirm = async (formEl: FormInstance | undefined) => {
    //判断 formEl 是否存在
    if (!formEl) return

    await formEl.validate((valid, fields) => {
        if (valid) {
            //
            companyAudit({
                auditStatus: Number(dialog.audit),
                id: information.id,
                remark: Number(dialog.audit) === 1 ? '' : dialog.remark
            }).then(res => {
                if (res.data.value === 200) {
                    //通过审核后隐藏弹窗
                    emits('hidden', true)
                    //重置表单内容
                    dialog.audit = ''
                    dialog.remark = ''
                    formEl.resetFields()
                }
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}

/**
 * 关闭弹窗方法，并且传递弹窗隐藏
 */
const onAuditCancel = () => {
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    emits('hidden', true)
    //重置表单内容
    dialog.audit = ''
    dialog.remark = ''
}
</script>

<style scoped lang="scss">
.dialog-box {
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 50%;
            margin-bottom: 14px;
            display: flex;
            color: rgba(0, 0, 0, 0.88);
        }
        &.look-info {
            margin-top: 14px;
            li {
                width: 33.33%;
                &:last-child {
                    width: 100%;
                }
            }
        }
    }
    .preview-image {
        display: block;
        width: 160px;
        height: 100px;
        background-color: antiquewhite;
        border: 0;
        margin-bottom: 14px;
    }
}
.audit {
    border-top: 1px solid #f2f2f2;
    padding-top: 14px;
}
.btn {
    display: flex;
    justify-content: center;
    margin: 16px 0 16px 0;
}
</style>
